<script setup>
import {useId} from 'vue'
const emit = defineEmits(['change'])
const title = defineModel('title', {
  required: true,
  type: String,
  default: '',
})
const chartDateOption = ref([
  {
    label: '当天',
    value: '1',
  },
  {
    label: '当月',
    value: '2',
  },
  {
    label: '当年',
    value: '3',
  },
  {

    label: '全部',
    value: '4',
  },
])
const chartDate = ref('1')
const dateRange = ref('')

function handleDateRangeChange(val) {
  emit('dateChange', dateRange.value || chartDate.value)
}

console.log(useId())
</script>

<template>
  <el-card shadow="never" class="chart-card">
    <div class="flex-x-between chart-card-header mb-6 ">
      <div class="font-400 text-lg">{{ title }}</div>
      <div>
        <el-segmented v-model="chartDate" :options="chartDateOption" class="mr-3" @change="handleDateRangeChange" />
        <el-date-picker v-model="dateRange" class="!w-70" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable value-format="YYYY-MM-DD" @change="handleDateRangeChange" />
      </div>
    </div>
    <slot />
  </el-card>
</template>

<style lang="scss" scoped>

</style>
